<!DOCTYPE html>
<html lang="en">
#parse('base/head.html')
	<link rel="stylesheet" href="$!webPath/index/css/reset.css" type="text/css">
	<link rel="stylesheet" href="$!webPath/index/css/index.css" type="text/css">
<body class="mW-1108">
	<div class="PovertyAlleviationWrap">
		<div class="PAP_header">
			<form method="POST"   id="qryForm">
				<div class="hidden" >
					<input class="col-xs-12 col-sm-10" type="text"  id="form-field-currentYear" placeholder="currentYear" value="$!{currentYear}" />
				</div>
				<select class=" PAP_choice" name="vtime" id="form-select-vtime" data-placeholder="年份">
					<option value="2017">2017</option>
					<option value="2018">2018</option>
					<option value="2019">2019</option>
					<option value="2020">2020</option>
					<option value="2021">2021</option>
					<option value="2022">2022</option>
					<option value="2023">2023</option>
					<option value="2024">2024</option>
					<option value="2025">2025</option>
					<option value="2026">2026</option>
					<option value="2027">2027</option>
					<option value="2028">2028</option>
					<option value="2029">2029</option>
					<option value="2030">2030</option>
				</select>
				
				<select class="hidden PAP_choice" name="townId" id="form-select-townId" data-placeholder="镇(乡)">
					<option value="-1">全部</option>
					#foreach($townInfoPO in $townInfoPOList)
					<option value="$!{townInfoPO.townId}">$!{townInfoPO.townName}</option>
					#end
				</select>

				<button type="button" id="qryBtn"  class="btn btn-sm btn-primary pull-left " ><span class="ace-icon fa fa-plus icon-on-right"></span>开始统计</button>
				
				<button type="button" id="excelBtn"  class="btn btn-sm btn-primary pull-left " ><span class="ace-icon fa fa-download icon-on-right"></span>导出数据</button>
			</form>
			
		</div>
		<div class="SCCon def-SCCon">
			<div class="def-SCCon-BOX">
				<div class="leftEcharts">
					<h3 class="ech_title">苏尼特各镇走访频率</h3>
					<div id="incomePic1"></div>
				</div>
				<div class="leftEcharts">
					<h3 class="ech_title">苏尼特各镇走访次数</h3>
					<div id="incomePic2"></div>
				</div>
			</div>
			<div class="rightTable w100">
				<div class="row">
					<div class="col-sm-12" style="overflow-x:auto">
						<table id="grid-list"></table>
						<div id="grid-list-pager"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

#parse('base/footer.html')
<script src="$!webPath/assets/js/bootbox.js"></script>

<script type="text/javascript" src="$!webPath/index/js/echarts.min.js"></script>
<script type="text/javascript">
var incomePic1,incomePic2;

// 贫困户分布情况
$(function(){
	// 苏尼特各镇走访频率
	incomePic1 = echarts.init(document.getElementById('incomePic1'));
	var incomePic1option = {
		title : {
            text : ""
        },
        tooltip : {
	        trigger: 'axis',
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
	    // legend: {
	    //     data:['贫困人口','贫困户']
	    // },
	    grid: {
	    	top: '5%',
	        left: '3%',
	        right: '4%',
	        bottom: '8%',
	        containLabel: true
	    },	    
	    calculable : true,
	    xAxis : [
	        {
	            // type : 'category',
	            data : []
			    // 标题想显示全部文字则不注释以下代码
			    //"axisLabel":{  
				//     interval: 0  
				//}
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'走访频率',
	            type:'bar',
	            data:[],
	            barWidth : 15,
	            itemStyle:{
                    normal:{
                        color:'#4c8cfa'
                    }
                },
	        }
	    ]
	};
	incomePic1.setOption(incomePic1option);

	// 苏尼特各镇年走访次数
	incomePic2 = echarts.init(document.getElementById('incomePic2'));
	var incomePic2option = {
		title : {
            text : ""
        },
        tooltip : {
	        trigger: 'axis',
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
	    // legend: {
	    //     data:['贫困人口','贫困户']
	    // },
	    grid: {
	    	top: '5%',
	        left: '3%',
	        right: '4%',
	        bottom: '8%',
	        containLabel: true
	    },	    
	    calculable : true,
	    xAxis : [
	        {
	            // type : 'category',
	            data : []
			            // 标题想显示全部文字则不注释以下代码
			         //    "axisLabel":{  
				        //     interval: 0  
				        // }  
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'走访次数',
	            type:'bar',
	            data:[],
	            barWidth : 15,
	            itemStyle:{
                    normal:{
                        color:'#13ad65'
                    }
                },
	        }
	    ]
	};
	incomePic2.setOption(incomePic2option);

})
</script>



<script>
    var projectType = '';
    jQuery(function ($) {
        menuActive(2);
        
        $("#qryBtn").on('click',function () {
    		reloadGridData();
        });
    	
    	$("#excelBtn").on('click',function () {
    		console.log("excelBtn click");
        	var url = '$!webPath/jzpr/exportTownRankData?';
	  		var params = $('#qryForm').serialize();
	  		params = decodeURIComponent(params,true);
	  	    params = encodeURI(encodeURI(params));
	  		url += params;
	  		console.log(params);
	  		console.log(url);
	  		var w  = window.open(url,'_blank');   
        });
    	
    	

        
        
    });
</script>
<!-- 项目列表 -->
<script type="text/javascript">
    function reloadGridData() {
		console.log("reloadGridData...");
        jQuery("#grid-list").jqGrid('setGridParam',{
            datatype:'json',
			mtype : "POST",
            postData:{'vtime':$("#form-select-vtime option:selected").val(),
                'townId':$("#form-select-townId option:selected").val()
			}, //发送数据
            page:1
        }).trigger("reloadGrid");
    }
	
	var parentBodyHeight = $('#left-gov-tree', window.parent.document).height()||800;
    //var pkh_parent_column = $("#grid-list").closest('[class*="col-"]').closest('h4');
    var widget_header = $(".fpxmList");
	    //resize to fit page size


	
    
    
	
    //初始化模态窗口
    jQuery(function($) {
		//v2
		$("#operateDetailModal").on("hidden", function() {  
			$(this).removeData("modal");  
			console.log("operateDetailModal hidden ");
			
		});  
		//v3
		$("#operateDetailModal").on("hidden.bs.modal", function() {  
			$(this).removeData("bs.modal");
			/*modal页面加载$()错误,由于移除缓存时加载到<span style="color: rgb(51, 51, 255);"><div class="modal-content"></div></span>未移除的数据，手动移除加载的内容*/
			$(this).find(".modal-content").children().remove(); 
			console.log("operateDetailModal hidden.bs.moda ");
		}); 
	});
	
    $("#grid-list").jqGrid({
        url : '$!webPath/jzpr/qryTownRankData',
        datatype : "json",
		mtype : "POST",
        height : parentBodyHeight-300,
        //autoHeight : true,
        autowidth: true,
        colNames : [ '乡镇','责任人数量','贫困户数','频率次/户','年走访次数','1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
        colModel : [

            {name : 'townName',index : 'townName' },
            {name : 'aidStaffNum',index : 'aidStaffNum' },
			{name : 'povertyFamilyNum',index : 'povertyFamilyNum' },
			{name : 'avgVisitNum',index : 'avgVisitNum' },
			{name : 'yearVisitNum',index : 'yearVisitNum' },
			{name : 'oneVisitNum',width:'50px',index : 'oneVisitNum' },
			{name : 'twoVisitNum',width:'50px',index : 'twoVisitNum' },
			{name : 'threeVisitNum',width:'50px',index : 'threeVisitNum' },
			{name : 'fourVisitNum',width:'50px',index : 'fourVisitNum' },
			{name : 'fiveVisitNum',width:'50px',index : 'fiveVisitNum' },
			{name : 'sixVisitNum',width:'50px',index : 'sixVisitNum' },
			{name : 'sevenVisitNum',width:'50px',index : 'sevenVisitNum' },
			{name : 'eightVisitNum',width:'50px',index : 'eightVisitNum' },
			{name : 'nineVisitNum',width:'50px',index : 'nineVisitNum' },
			{name : 'tenVisitNum',width:'50px',index : 'tenVisitNum' },
			{name : 'elevenVisitNum',width:'50px',index : 'elevenVisitNum' },
			{name : 'twelveVisitNum',width:'50px',index : 'twelveVisitNum' }
            
        ],
        postData: {    
        	'vtime':$("#form-select-vtime option:selected").val(),
            'townId':$("#form-select-townId option:selected").val()
	    },
        jsonReader : {
            root : "resultList",
            page : "page",
            total : "totalPages",
            records : "totalRecords",
            rows : "resultList"
        },
        rowNum:100,
        rowList:[10,20,50,100],
        //pager: '#grid-list-pager',
        viewrecords : false,
        loadComplete : function() {
			var table = this;
			setTimeout(function(){
				styleCheckbox(table);
				
				updateActionIcons(table);
				updatePagerIcons(table);
				enableTooltips(table);
			}, 0); 

			$(table).siblings(".norecords").remove(); 
			var rowNum = parseInt($(table).getGridParam("records"), 10);   
			if (rowNum <= 0) {   
				$(table).parent().append("<div  class=\"norecords\">没有数据...</div>");
				$(table).siblings(".norecords").show(); 								
			} 
			
			
			
			var obj=$("#grid-list").jqGrid("getRowData");
			var townName = [];
			var avgVisitAry = [];
			var yearVisitAry = [];
		    jQuery(obj).each(function(index,element){
		    	console.log(index);console.log(element);
		    	townName.push(element.townName);
		    	avgVisitAry.push(element.avgVisitNum);
		    	yearVisitAry.push(element.yearVisitNum);
		    });
			console.log(townName);
			console.log(avgVisitAry);
			console.log(yearVisitAry);
			
			// 苏尼特各镇走访频率
			var eOptions1 = {
				    xAxis : [
				        {
				            data : townName
				        }
				    ],
				    series : [
				        {
				            data:avgVisitAry
				        }
				    ]
				};
			incomePic1.setOption(eOptions1);
			
			// 苏尼特各镇年走访次数
			var eOptions2 = {
			    xAxis : [
			        {
			            data : townName,
			        }
			    ],
			    series : [
			        {
			            data:yearVisitAry
			        }
			    ]
			};
			incomePic2.setOption(eOptions2);
        },

        multiselect : false
    });
    
    $("#grid-list").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "scroll" });
</script>
<script>
    jQuery(function ($) {
    	//设置下拉框
    	var currentYear = $("#form-field-currentYear").val();
    	$("#form-select-vtime").find("option[value='"+currentYear+"']").attr("selected",true);
    	
    });

    
    
    </script>

</body>
</html>
